<template>
  <el-table
    v-loading="loading"
    max-height="640"
    :cell-style="{ textAlign: 'center', borderColor: '#999' }"
    :header-cell-style="{
      background: '#F5F7FA',
      textAlign: 'center',
      borderColor: '#999',
    }"
    :data="data"
    border
    style="width: 100%"
    class="custom-table-border"
    @selection-change="emithandleSelectionChange"
  >
    <!-- 前面的插槽内容 -->
    <slot name="before-columns" />
    <el-table-column
      v-for="(item, index) in th"
      :key="index"
      :fixed="index < n"
      :prop="item.fields"
      :label="item.translate"
      :min-width="flexColumnWidth(item.translate, item.fields, data)"
    />
    <!-- 后面的插槽内容 -->
    <slot name="after-columns" />
  </el-table>
</template>

<script>
export default {
  name: "GlobalElTable",
  props: {
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
    th: {
      type: Array,
      required: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    n: {
      type: Number,
      default: () => 0,
    },
  },
  methods: {
    emithandleSelectionChange(val) {
      this.$emit("selection-change", val);
    },
  },
};
</script>
<style lang="scss">
/* 设置最外层边框的颜色 */

// .custom-table-border {
//   border: 1px solid #999 !important;
// }
</style>
